<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div style="width: 100%; min-height:100vh ; margin: 0 auto; background-color: #ffffff;;">
        <div style="height: 60px;"></div>
        <div style="width: 1800px; height: 350px; position: relative; display: inline-block;">
            <img style="width: 1800px; height: 350px; display: block;" src="../../assets/13.jpg" alt="">
            <div style="width: 1000px; height: 370px; margin-left: 350px; margin-top: -370px; position: absolute;">
                <el-breadcrumb style="font-size: 17px;" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item style="color: #333333;" :to="{ path: '/' }">全部课程</el-breadcrumb-item>
                <el-breadcrumb-item style="color: #333333;"><a href="/">系列课程</a></el-breadcrumb-item>
                <el-breadcrumb-item style="color: #999999;">详情</el-breadcrumb-item>
                </el-breadcrumb>
                <div style="width: 500px; height: 50px; float: left; margin-top: -20px;">
                <h2 style="width: 500px; height: 66px; font-size: 50px; text-align: left; color: #ffffff;">{{userData.subjectCourseTitle}}</h2>
                </div>
                <div style="width: 600px; height: 80px; margin-top: 115px;">
                    <p style="text-align: left; font-size: 15px; color: #DBDBDB;">{{userData.subjectCourseInfo}}</p>
                </div>
                <!-- <div style="float: left;">
                    <el-button style="width: 60px; height: 60px; background: #FF8A00; border: none; font-size: 30px;">
                        <div>
                            <i class="el-icon-star-off" style="justify-content: center; align-items: center; display: flex;"></i>
                        </div>
                    </el-button>
                </div>
                <div style="width: 322px; height: 60px; background-color: #FF7200;">
                    <div style="height: 13px;"></div>
                    <div style="justify-content: center; align-items: center; display: flex; flex-direction: column;" @click="handleJoinAllClick(userData)">
                      <span style="font-size: 24px; color: #FFFFFF; text-decoration: none; cursor: pointer;">参加全部课程</span>
                    </div>
                </div> -->
                <!-- <div style="width: 140px; height: 40px; margin-left: 330px; margin-top: -55px;">
                    <span style="font-size: 36px; color: #FF3C00;">￥{{payAll}}</span>
                </div> -->
                <div style="height: 20px;"></div>
                <div style="width: 300px; height: 40px; text-align: left;">
                    <span style="font-size: 15px; color: #DBDBDB;">发布老师：{{userData.teacherName}}</span><br>
                    <span style="font-size: 15px; color: #DBDBDB;">发布时间：{{userData.createTime}}</span>
                </div>
            </div>
        </div>
        <!-- <div style="width: 1800px; height: 71px; margin: 0 auto; background-color: #ffffff;">
            <div style="margin-right: 770px;">
                <div style="height: 23px;"></div>
                <span style="font-size: 19px; color: #666666; margin: 20px;">机器学习实战</span>
                <span style="font-size: 19px; color: #666666; margin: 20px;">深度学习入门</span>
                <span style="font-size: 19px; color: #666666; margin: 20px;">深度学习-Tensorflow实战</span>
            </div>
        </div> -->
        <div style="width: 1800px; height: 1px; margin: 0 auto; background-color:rgb(247, 247, 247);"></div>
        <div style="width: 1800px;margin: 0 auto; background-color: #ffffff;margin-bottom:100px">
            <div style="width: 1200px; margin:  0 auto; background-color: rgb(255, 255, 255);">
                <div  v-for="seriesCourseById in seriesCourseByIdList" :key="seriesCourseById.id">
                <div style="width: 1200px; height: 100px;"></div>
                <div style="width: 1200px; height: 40px; text-align: left;">
                    <span style="font-size: 31px; color: #444444;">{{seriesCourseById.courseTitle}}</span>
                </div>
                <div style="width: 1200px; text-align: left;">
                    <div style="height: 30px;"></div>
                    <span style="font-size: 15px; color: #666666;">{{seriesCourseById.courseInfo}}</span>
                </div>
                <!--  -->
                <div style="height: 30px;"></div>
                <div style="width: 1200px; height: 250px; margin: 0 auto; border: 1px solid rgb(231, 231, 231); background-color: rgb(255, 255, 255);">
                    <div style="width: 350px; height: 250px; float: left;">
                        <img style="width: 350px; height: 250px;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + seriesCourseById.courseImg" alt="">
                    </div>
                    <div style="width: 850px; height: 250px; float: right; text-align: left;">
                      <div style="float: right; margin-right: 20px;" class="buttonss">
                          <!-- <el-button style="width: 60px; height: 60px; border: none; font-size: 30px;" @click="handleStarClick(seriesCourseById)"> -->
                              <div style="height: 20px;"></div>
                              <div @click="handleStarClick(seriesCourseById)" style="width: 60px; height: 60px; border: none; font-size: 30px;">
                                  <i v-if="seriesCourseById.bookMarkId === 0" class="el-icon-star-off" style="justify-content: center; align-items: center; display: flex;"></i>
                                  <i v-else class="el-icon-star-on" style="justify-content: center; align-items: center; display: flex;color: rgb(255, 217, 0);"></i>
                              </div>
                          <!-- </el-button> -->
                      </div>
                        <div style="width: 642px; height: 28px; margin-left: 20px; margin-top: 10px; font-size: 26px; color: #333333;">
                            {{seriesCourseById.courseTitle}}
                        </div>
                        <div style="width: 642px; height: 40px; margin-left: 20px; margin-top: 20px; font-size: 16px; color: #999999;">
                            讲师:{{seriesCourseById.teacherName}}
                        </div>
                        <div style="width: 485px; height: 60px; margin-left: 20px; margin-top: -10px; font-size: 14px; color: #333333;">
                            <!-- {{seriesCourseById.courseInfo}} -->
                        </div>
                        <div style="width: 714px; height: 29px; margin-left: 20px; margin-top: 25px; font-size: 14px; color: #999999;">
                            现在参加，2019人与你并肩作战!
                        </div>
                        <div style="margin-left: 16px;">
                            <img style="width: 30px; height: 30px; margin: 5px;" src="../../assets/微信图片.jpg" alt="">
                            <img style="width: 30px; height: 30px; margin: 5px;" src="../../assets/微信图片.jpg" alt="">
                            <img style="width: 30px; height: 30px; margin: 5px;" src="../../assets/微信图片.jpg" alt="">
                            <img style="width: 30px; height: 30px; margin: 5px;" src="../../assets/微信图片.jpg" alt="">
                            <img style="width: 30px; height: 30px; margin: 5px;" src="../../assets/微信图片.jpg" alt="">
                            <img style="width: 30px; height: 30px; margin: 5px;" src="../../assets/微信图片.jpg" alt="">
                            <div style="margin-left: 245px; margin-top: -38px; font-size: 14px; color: #444444;">
                                ......
                            </div>
                        </div>
                        <div style="width: 200px; height: 40px; margin-left: 680px; margin-top: -100px; font-size: 28px; color: #FF3E00;">
                            <template v-if="seriesCourseById.payType === 0">
                                免费
                            </template>
                            <template v-else>
                                ¥ {{ seriesCourseById.coursePrice }}
                            </template>
                        </div>
                        <div style="width: 190px; height: 60px; margin-left: 640px; margin-top: 5px; background-color: #FF8000; font-size: 28px; color: #FFFFFF;">
                            <div style="height: 9px;"></div>
                            <div style="justify-content: center; align-items: center; display: flex; flex-direction: column; cursor: pointer;" @click="handleSeriesCourseByIdClick(seriesCourseById)">查看详情</div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { EventBus } from '@/main'
export default {
  data () {
    return {
      userData: {},
      seriesCourseByIdList: {},
      userInfo: {},
      loginId: '',
      payAll: {}
    }
  },
  created () {
    // 获取用户存储的信息
    this.userInfo = JSON.parse(localStorage.getItem('user'))
    if (this.userInfo) {
      this.userInfo = this.userInfo.data
      this.loginId = this.userInfo.id
    }
    // 课程信息
    this.userData = JSON.parse(this.$route.query.roid)
    this.getSeriesCourseById()
    // this.getSeriesCoursePrice()
  },
  methods: {
    // 收藏按钮
    handleStarClick (seriesCourseById) {
      // 判断是否登录
      if (this.loginId === null || this.loginId === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        // 判断收藏状态 为0则添加收藏 不为0则移除收藏
        if (seriesCourseById.bookMarkId === 0) {
          const formData = new FormData()
          formData.append('uid', this.loginId)
          formData.append('cid', seriesCourseById.id)
          this.$axios.post('/bookMark/addBookMark', formData).then((res) => {
            seriesCourseById.bookMarkId = 1
            this.$message({
              message: '已加入收藏',
              type: 'success'
            })
          })
        } else {
          const formData = new FormData()
          formData.append('uid', this.loginId)
          formData.append('cid', seriesCourseById.id)
          this.$axios.post('/bookMark/delBookMarkCourse', formData).then((res) => {
            seriesCourseById.bookMarkId = 0
            this.$message({
              message: '已从收藏中移除',
              type: 'warning'
            })
          })
        }
      }
    },
    // 跳转传值
    handleJoinAllClick (userData) {
      // 执行跳转页面
      this.$router.push({
        path: '/confirmorder',
        query: {
          roid: JSON.stringify(userData)
        }
      })
    },
    // // 查询总价
    // getSeriesCoursePrice () {
    //   this.$axios.post('/seriesCourse/getSeriesCoursePrice', this.userData).then((res) => {
    //     this.payAll = res.data.data
    //   })
    // },
    // 查询该系列包含哪些数据
    getSeriesCourseById () {
      if (this.loginId === null || this.loginId === '') {
        this.$axios.post('/seriesCourse/getSeriesCourseById', this.userData).then((res) => {
          this.seriesCourseByIdList = res.data.data
        })
      } else {
        this.userData.userId = this.loginId
        this.$axios.post('/seriesCourse/getSeriesCourseById', this.userData).then((res) => {
          this.seriesCourseByIdList = res.data.data
        })
      }
    },
    handleSeriesCourseByIdClick (seriesCourseById) {
      // 判断是否登录
      if (this.loginId === null || this.loginId === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        const formData = new FormData()
        formData.append('uid', this.loginId)
        formData.append('cid', seriesCourseById.id)
        this.$axios.post('/Order/selectByTwoId', formData).then((res) => {
          if (seriesCourseById.payType === 0) {
          // 执行跳转页面
            this.$router.push({
              path: '/courseVideo',
              query: {
                roid: JSON.stringify(seriesCourseById)
              }
            })
          } else {
            if (res.data.data === null) {
              // 执行跳转页面
              this.$router.push({
                path: '/purchasecourses',
                query: {
                  roid: JSON.stringify(seriesCourseById)
                }
              })
            } else {
              // 执行跳转页面
              this.$router.push({
                path: '/courseVideo',
                query: {
                  roid: JSON.stringify(seriesCourseById)
                }
              })
            }
          }
        })
      }
    }

  }
}
</script>

<style>
.aa{
  color: rgb(255, 217, 0);
}
.buttonss :hover {
  cursor: pointer; /* 鼠标指针设置为手型 */
}
</style>
